<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
          <!--
          TODO:表单
              作用: 收集用户填写的信息,将信息发送给服务器,由服务器将提交的数据保存到数据库中
              格式: <form></form>
              属性:
                  action: 设置提交路径
                      将来我们在此处设置java类的地址,用于将数据提交给java类.
                      www.baidu.com
                      127.0.0.1:10086
                  method: 设置提交方式(java中常用的提交方式  get/post )
                      get: 默认值
                          提交的数据会出现在浏览器地址栏
                          提交的数据不安全
                          提交的数据量受限 (一般的浏览器地址栏大小为,不超过4kb)
                          携带数据的格式:
                              提交路径?username=tom&pwd=123&gender=0...
                      post:
                          提交的数据不会出现在浏览器地址栏
                          提交的数据相对安全
                          提交的数据量不受限(后期文件上传时,必须使用post方式)
                          携带数据的格式: 请求参数通过请求体携带

              子标签:
                  input: 输入框标签
                  select: 下拉选标签
                  textarea: 文本域标签
           TODO: input子标签
              格式: <input/>
              属性:
                  type:
                      text: 文本输入框
                      password: 密码输入框
                      radio: 单选框
                      checkout: 复选框

                      button: 普通按钮,只有按钮效果,没有任何功能
                      reset: 重置按钮,将表单返回到最初的状态
                      submit: 提交按钮,收集表单中的数据,将数据提交给服务器
                      image: 图片提交,作用域submit一致

                      file: 文件输入框,上传文件时使用
                      hidden: 隐藏输入框

                      date: 日期输入框
                      email: 邮箱地址输入框
              TODO: 下拉选标签
                  格式:
                      <select>
                          <option>值</option> 下拉项
                          <option>值</option> 下拉项
                          <option>值</option> 下拉项
                      </select>
                   属性:
                      size: 展示的个数
                      multiple: 设置复选框可以多选
             TODO: 文本域标签
                  格式: <textarea></textarea>
                  属性:
                      rols: 行
                      cols: 列
              TODO: 通用属性
                  name: ★
                      1.给单选框或复选框分组
                      2.输入框的值要想被表单收集,必须提供name属性
                  value:
                      1.给按钮起名称
                      2.设置提交给服务器的默认值
                  readonly: 只读
                      readonly="readonly"
                      注意: 表单提交时,会收集只读框中的数据信息
                  disabled: 禁用
                      disabled="disabled"
                      注意: 一旦禁用,那么表单提交时也不会收集这个输入框中的值了
             TODO: 默认值设置(了解)
                  text password : 通过添加value属性设置默认值
                  radio checkbox : 通过给标签添加checked属性
                  select : 给下拉项option上添加selected属性
                  textarea : 直接在标签体中编写默认值即可

                  注意: 在html中如果属性名和属性值一致,那么属性值可以省去不写
          -->
  <form action="#" method="post" align="center">
    用户名:<input type="text" name="username" placeholder="请输入用户名."/><br/>
    密码:<input type="password" name="upw" placeholder="请输入密码."/><br/>
    性别:<input type="radio" name="gender" value="男"/>男 <input type="radio" name="gender" value="女"/>女<br/>
    生日:<input type="date" name="birthday"/><br/>
    爱好:<input type="checkbox" name="抽烟"/>抽烟
        <input type="checkbox" name="喝酒"/>喝酒
        <input type="checkbox" name="烫头"/>烫头<br/>
    邮箱:<input type="email" name="email" placeholder="请输入邮箱地址"/><br/>
    籍贯:<select name="省">
          <option value="1" name="江苏">江苏</option>
          <option value="2" name="河北">河北</option>
          <option value="3" name="河南">河南</option>
        </select>省
      <select name="市">
        <option value="4" name="南京">南京</option>
        <option value="5" name="石家庄">石家庄</option>
        <option value="6" name="郑州">郑州</option>
      </select>市<br/>
    头像:<input type="file" name="head"/><br/>
    自我介绍:<textarea name="介绍" cols="20" rows="20" placeholder="请描述自己."></textarea><br>
    图片:<input type="image" src="https://cdn.pixabay.com/photo/2021/12/02/17/50/bubbles-6841040__340.jpg" alt="好看的图片"/><br/>
    <input type="button" value="普通按钮"/>
    <input type="reset" value="重置按钮"/>
    <input type="submit" value="提交按钮"/>
  </form>
</body>
</html>